<template>
  <div class="collect">
    <el-tabs v-model="activeName" @tab-click="taskId = ''">
      <el-tab-pane label="采集任务" name="Task"></el-tab-pane>
      <el-tab-pane label="采集记录" name="Log"></el-tab-pane>
      <el-tab-pane label="栏目管理" name="Column"></el-tab-pane>
    </el-tabs>
    <div class="wrap">
      <component :is="activeName" :taskId="taskId" />
    </div>
  </div>
</template>
<script>
export default {
  components: {
    Task: () => import('./Task'),
    Log: () => import('./Log'),
    Column: () => import('./Column/Layout.vue'),
  },
  data() {
    return {
      activeName: 'Task',
      taskId: '',
    }
  },
  mounted() {
    this.$bus.$on('showTaskLog', (v) => {
      this.taskId = v
      this.activeName = 'Log'
    })
  },
  beforeDestroy() {
    this.$bus.$off('showTaskLog')
  },
  methods: {},
}
</script>
<style scoped>
.wrap {
  max-height: 720px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>